<template>
	<view>
		<view class="top-container">
			<view class="top-tabbar">
				<view v-for="(item, index) in tabList" :key="index" :class="state_active == index ? 'tab-item active' : 'tab-item'" @click="stateFunc(index)">
					{{ item.text }}( {{ item.total }})
				</view>
			</view>

			<view class="total p-0-30 d-s-c f24 gray9">
				{{$t('agent.team_total_members')}}
				<text class="red">{{ teamTotal }}</text>
				{{$t('agent.people')}}
			</view>
		</view>

		<!--{{$t('agent.list')}}-->
		<scroll-view scroll-y="true" class="scroll-Y" :style="'height:' + scrollviewHigh + 'px;'" lower-threshold="50" @scrolltolower="scrolltolowerFunc">
			<view class="p-0-30 bg-white">
				<view class="border-b p-20-0" v-for="(item, index) in tableData" :key="index">
					<view class="d-b-c">
						<view class="agent-team-photo"><image :src="item.user.avatarUrl" mode="aspectFill"></image></view>
						<view class="flex-1 ml20 f24">
							<view class="d-b-c">
								<text class="f28 gray3">{{ item.user.nickName }}</text>
								<text class="gray9">{{ item.createTime }}</text>
							</view>
							<view class="d-b-c">
								<text class="gray9">HK${{ item.user.expendMoney }}</text>
								<text class="gray9" v-if="item.agent">{{ item.agent.firstNum + item.agent.secondNum + item.agent.thirdNum }}{{$t('agent.members')}}</text>
							</view>
						</view>
					</view>
				</view>
				<!-- 没有记录 -->
				<view class="d-c-c p30" v-if="tableData.length == 0 && !loading">
					<text class="iconfont icon-wushuju"></text>
					<text class="cont">{{$t('agent.no_related_records')}}</text>
				</view>
				<uni-load-more v-else :loadingType="loadingType"></uni-load-more>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import uniLoadMore from '@/components/uni-load-more.vue';
export default {
	components: {
		uniLoadMore
	},
	data() {
		return {
			/*手机高度*/
			phoneHeight: 0,
			/*可滚动视图区域高度*/
			scrollviewHigh: 0,
			/*状态选中*/
			state_active: 0,
			/*数据列表*/
			tableData: [],
			setting: [],
			teamTotal: 0,
			page: 1,
			no_more: false,
			tabList: [],
			list_rows: 15,
			loading: true
		};
	},
	computed: {
		/*加载中状态*/
		loadingType() {
			if (this.loading) {
				return 1;
			} else {
				if (this.tableData.length != 0 && this.no_more) {
					return 2;
				} else {
					return 0;
				}
			}
		}
	},
	mounted() {
		/*初始化*/
		this.init();
		/*获取数据*/
		this.getData();
	},
	onShow(){
		uni.setNavigationBarTitle({
			title: this.$t('common.my_team')
		})
	},
	methods: {
		/*初始化*/
		init() {
			let self = this;
			uni.getSystemInfo({
				success(res) {
					self.phoneHeight = res.windowHeight;
					// 计算组件的高度
					let view = uni.createSelectorQuery().select('.top-container');
					view.boundingClientRect(data => {
						let h = self.phoneHeight - data.height;
						self.scrollviewHigh = h;
					}).exec();
				}
			});
		},

		/*获取数据*/
		getData() {
			let self = this;
			self.loading = true;
			let param = {};
			(param.level = self.state_active + 1),
				(param.pageIndex = self.page || 1),
				(param.pageSize = self.list_rows),
				self._postBody(
					'plus/agent/team/lists',
					param,
					function(res) {
						self.loading = false;
						self.teamTotal = res.data.agent.firstNum;
						let data = res.data;
						// 导航栏数据
						self.tabList = [
							{
								value: 1,
								text: data.words.team.first,
								total: data.agent.firstNum
							}
						];
						if (data.setting.level >= 2) {
							self.tabList.push({
								value: 2,
								text: data.words.team.second,
								total: data.agent.secondNum
							});
							self.teamTotal += data.agent.secondNum;
						}
						if (data.setting.level == 3) {
							self.tabList.push({
								value: 3,
								text: data.words.team.third,
								total: data.agent.thirdNum
							});
							self.teamTotal += data.agent.thirdNum;
						}
						self.tableData = self.tableData.concat(data.list.records);
						self.last_page = data.list.lastPage;
						if (self.last_page <= 1) {
							self.no_more = true;
						}
					},
					null,
					function() {
						self.loading = false;
					}
				);
		},

		/*切换类别*/
		stateFunc(e) {
			let self = this;
			if (e != self.state_active) {
				self.tableData = [];
				self.page = 1;
				self.state_active = e;
				self.getData();
			}
		},

		/*可滚动视图区域到底触发*/
		scrolltolowerFunc() {
			let self = this;
			if (self.no_more) {
				return;
			}
			self.page++;
			if (self.page <= self.last_page) {
				self.getData();
			} else {
				self.no_more = true;
			}
		}
	}
};
</script>

<style>
.top-container .total {
	height: 80rpx;
}

.agent-team-photo,
.agent-team-photo image {
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
}
</style>
